import React,{Component} from "react";
import "./viedo.css"

import { Tabs, WhiteSpace } from 'antd-mobile';

import { Player } from 'video-react';

import {Link} from "react-router-dom"


import {getMvList} from "../../api/index"

const tabs = [
  { title: "内地" },
  { title: '港台' },
  { title: '非洲' },
];

// const TabExample = () => (
  

// );



class Video extends Component {
    constructor(){
        super()
        this.state={
            MvList:[]
        }
    }
    componentDidMount(){
        getMvList(30).then(res=>{
            console.log(res.data.data)
        
          
                this.setState({
                    MvList:res.data.data
                 })
          
       })
    }
    render(){
        let {MvList}=this.state
        // console.log(MvList)
        return(
            <div className="video">
                    <div className="VideoInner">
  
                    <Tabs tabs={tabs} initialPage={0} animated={false} useOnPan={false}>
                        <div className="VideoDoubleInner">
                            <div className="MvHeader">
                                <div className="headerLeft">
                                    <span>MV精选</span>
                                </div>
                                
                            </div>
                           
                            {MvList.map((item,index)=>{
                                return (
                                    <div className="MvMain" key={item.id}>
                                            <Link to={{pathname:"/mvDetail",state:{id:item.id}}}  className="EachMv">
                                                <img src={item.cover}/>
                                                <div className="RightTop">
                                                      <span className="iconfont broadCast">&#xe631;</span>
                                                      <i>{String(parseInt(item.playCount)).length===7?String(parseInt(item.playCount)).slice(0,3):(String(parseInt(item.playCount)).length===8?String(parseInt(item.playCount)).slice(0,4):String(parseInt(item.playCount)).slice(0,2))}</i><i>万</i>
                                                </div>
                                                <div className="Middle">
                                              
                                                <span className="iconfont broadCastMiddle">&#xe633;</span>
                                                 </div>
                                            </Link>
                                            <div className="Mvfooter">
                                                <div className="MVfooterL"><span>{index<10?0+index+1:index+1}</span></div>
                                                <div className="MVfooterR">
                                                        <h2>{item.name}</h2>
                                                        <h3>{item.artistName}</h3>
            
                                                </div>
                                            </div>
                                    </div>
                         
                                )
                            })}                            
                  
                

                            
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', backgroundColor: '#fff' }}>
                        Content of second tab
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', backgroundColor: '#fff' }}>
                        Content of third tab
                        </div>
                    </Tabs>

                    </div>
            </div>
        )
    }
}

export default Video